<template>
	<view class="echart">
		<div ref="bar6"></div>
	</view>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {}
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      const xData = this.chartData.map(item => item.label);
      const yData1 = this.chartData.map(item => item.value1);
      const yData2 = this.chartData.map(item => item.value2);
      let option = {
        grid: {
          top: '20%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          top: "1%",
          right: "4%",
          itemWidth: 14,
          itemHeight: 10,
          itemGap: 20,
          textStyle: {
            fontSize: 12,
            color: '#666666',
            padding: [0, 0, 0, 3],
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          },
          textStyle: {
            color: "#000",
            fontSize: 12,
          },
          backgroundColor: "rgba(255, 255, 255, .92)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: 'rgba(160,160,160,0.3)'
              }
            },
            axisLabel: {
              fontSize: 11,
              color: '#666666',
              interval: 0,
              align: "center",
              // formatter: function(value) {
              //   return value.length > 5 ? value.slice(0, 5) + '...' : value; // 只显示前4个字符，并添加省略号
              // }
            },
            data: xData
          }
        ],
        yAxis: {
          type: 'value',
          name: '个',
          nameTextStyle: {
            color: '#666666',
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(160,160,160,0.3)", //网格线的颜色
              width: 1, //X轴的粗细
              type: "dashed", //虚线
            },
          },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666',
              fontSize: 12
            }
          }
        },
        series: [
          {
            name:'项目数',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: '#4C98F8',
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            barWidth: '25%',
            data: yData1
          },
          {
            name:'验收数',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: '#FFB701',
                barBorderRadius: 50,
                borderWidth: 0,
                borderColor: '#333'
              }
            },
            barWidth: '25%',
            data: yData2
          },
        ]
      }
      this.$refs.bar6.init(this.$echarts, chart => {
        chart.setOption(option);
      });
    }
  }
}
</script>

<style scoped>
.echart{
  width: 100%;
  height: 100%;
}
</style>
